<template>
    <div>
        <!-- <avue-card :option="option" :data="data"></avue-card> -->
        <div class="container">
            <div class="title">
                <h3>商品源管理</h3>
            </div>
<!--            <div class="btnGroup">-->
<!--                <div>-->
<!--                    <el-button v-for="(item,index) in buttonGroup" :type="item.type == '' ? '' : item.type"-->
<!--                    :key="index" :style="{backgroundColor: item.color, color: item.fontColor}" v-show="item.isOpenOrCloseFunction" @click="buttonClick(item)"-->
<!--                    :loading="item.text == '同步商品' && loading"> {{item.text}}</el-button>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</template>

<script>
import { ProductAsyncSaveDate } from '@/api/product_source/product_source'
import { mapGetters, mapMutations } from 'vuex';
export default {
    name: 'TicketSystemAdminHeader',

    data() {
        return {
            buttonGroup: [
                {
                    type: "warning",
                    text: "同步商品",
                    info: "xx",
                    fontColor: 'white',
                    isOpenOrCloseFunction: true, // 用于是否开放展示功能
                },
                {
                    type: "",
                    color: "rgb(3, 179, 178)",
                    text: "导出商品源",
                    info: "xx",
                    fontColor: 'white',
                    isOpenOrCloseFunction: false
                },
                {
                    type: "",
                    color: "rgb(3, 179, 178)",
                    text: "导入商品来源",
                    info: "xx",
                    fontColor: 'white',
                    isOpenOrCloseFunction: false
                },
                {
                    type: "",
                    color: "rgb(3, 179, 178)",
                    text: "下载导入商品来源模板",
                    info: "xx",
                    fontColor: 'white',
                    isOpenOrCloseFunction: false
                }
            ],
            option: {
                addBtn: false,
                span: 24,
                props: {
                img: 'img',
                title: 'title',
                info: 'text',
                }
            },
            data: [
                {
                    title: 'Alipay',
                    text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
                    img: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png'
                }
            ],
            loading: false,
        }
    },
    computed: {
        ...mapGetters('productSource', ['GET_PRODUCT_SOURCE_SHOP_ID', 'GET_PRODUCT_ID_VALUE']),
    },

    mounted() {

    },

    methods: {
        async buttonClick(item) {
            try {
                if(item.text == "同步商品") {
                    this.loading = true
                    const { data } = await ProductAsyncSaveDate(this.GET_PRODUCT_ID_VALUE)
                    // 主界面加载loading
                    this.$message.success("同步操作完成")
                    this.loading = false
                }
            } catch {
                setTimeout(() => {
                    this.loading = false
                }, 1000);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.container{
    display: flex;
    justify-content: space-between;
    .btnGroup {
        justify-content: center;
        align-items: center;
        display: flex;
        justify-content: flex-end;
        .el-button {
            border-radius: 5px;
        }
    }
}
</style>
